<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/images/favicon/favicon.png">
    <title>雫るる| 表情包</title>
    <link rel="stylesheet" href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/layui/css/layui.css">
    <link rel="stylesheet" href="./static/css/base.css">
    <link rel="stylesheet" href="./static/css/titlebar.css">
    <link rel="stylesheet" href="./static/css/nav.css">
    <link rel="stylesheet" href="./static/css/sutanpu.css">
    <link href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/viewer/viewer.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/layui/layui.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/viewer/viewer.js"></script>
    <script src="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/v-viewer/v-viewer.js"></script>
    <style>
         @media screen and (max-width: 768px){
            .layui-col-xs6{
                width: 100%;
            }
            .container{
                padding: 0;
            }
            .sutanpu-list{
                padding-top: 24px;
            }
         }
        @media screen and (max-width: 500px) {
            .sutanpu-list img {
                height: auto;
                width: 100%;
                flex-grow: 0;
                border-width: 5px 0;
                border-color: #ea668e;
                border-style: solid;
            }
            .container{
                 width: 93%;
            }
            .right{
                display: none;
            }
            .left{
                width: 300px;
            }
            .body_container{
                padding: 0;
            }
            .layui-col-xs6{
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="layui-container" id="nav_container">
            <div class="logo" >
                <img src="./static/images/lulu_logo.png" width="98px" alt="">
            </div>
            <input type="checkbox"  id="nav-toggle" class="nav-toggle">
            <label for="nav-toggle" id="mobile-icon">
                <span class="menu-icon">
                    <i class="layui-icon layui-icon-app"></i>  
              </span>
            </label>
            <div class="page_nav">
                <ul class="layui-nav">
                    <li class="layui-nav-item">
                        <a href="index.html">首页</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item">
                        <a href="personal.html">个人简介</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="music.html">音乐</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item">
                        <a href="video.html ">视频</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="photo.html ">同人图</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item layui-this">
                        <a href="meme.html">表情包</a>
                        <div class="radius"></div>
                    </li>
                    <li class="layui-nav-item ">
                        <a href="about.html">关于</a>
                        <div class="radius"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-container body_container main">  
        <div id="app" class="">
            <div class="layui-row headline container">
                <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
                    <h1 class="left">表情包</h1>
                    <h1 class="right">SUTANPU</h1>
                </div>
            </div>

            <!-- <div class="sutanpu-list container">
                <div v-for="item in list" class="item layui-col-xs6 layui-col-sm4 layui-col-md3" >
                    <img :src="item.url" :alt="item.name">
                </div>
            </div> -->
            <div class="sutanpu-list container" v-viewer>
                <img v-for="item in list" :src="item.url" :alt="item.name">
            </div>
            <div class="sutanpu-pagination container">
                <el-pagination
                    small
                    background
                    :page-size="pageSize"
                    :pager-count=5
                    layout="prev, pager, next"
                    @current-change="handleCurrentPageChange"
                    :total="count">
                </el-pagination>
            </div>
 
        </div>
    </div>


    <script type="text/javascript">
        Vue.use(VueViewer.default)
        var app = new Vue({
            el: '#app',
            data: {
                list: [],
                pageSize: 15,
                count: 0,
                cruentPage: 1,
                apiPrefix: "//back.lulufans.cn:3000/api/v1",
                api: {
                    getList: {
                        url: "/sutanpu-list"
                    },
                }
            },
            created() {
                this.fetchData()
            },
            methods: {
                fetchData() {
                    this.getList();
                },
                getList() {
                    axios.get(`${this.apiPrefix}${this.api.getList.url}?pageSize=${this.pageSize}&page=${this.cruentPage}`)
                        .then(response => {
                            this.count = response.data.data.count
                            this.list = response.data.data.rows
                            console.log(response.data.data.rows)
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                handleCurrentPageChange(cruentPage){
                    this.cruentPage = cruentPage;
                    this.getList();
                }
            },
        });

    </script>
</body>

</html>